<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '新增回访',
			size: '30%',
			appendToBody: true
		}"
		showConfirm
		confirmText="提交回访"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="消费信息" v-if="visitInfo.projects && visitInfo.projects.length">
				<el-card shadow="never">
					<el-form-item label="消费项目" style="margin-bottom: 0;">
						<div v-for="(item, index) in visitInfo.projects" :key="index">
							{{ index + 1 }}、{{ item }}
						</div>
					</el-form-item>
					<el-form-item label="实际消费" prop="pay_date" style="margin-bottom: 0;">
						<h3 class="color-danger">￥{{ visitInfo.real_amount || 0 }}</h3>
					</el-form-item>
					<el-form-item
						label="是否属实"
						prop="is_true"
						required
						style="margin-bottom: 0;"
					>
						<el-radio-group v-model="form.is_true">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-card>
			</el-form-item>
			<el-form-item label="回访信息">
				<el-card shadow="never">
					<el-form-item label="回访日期" prop="visit_time">
						<cl-date-picker
							v-model="form.visit_time"
							placeholder="选择日期"
							style="width: 100%"
							value-format="yyyy-MM-dd"
						/>
					</el-form-item>
					<el-form-item label="电话是否接通" prop="connect" required>
						<el-radio-group v-model="form.connect">
							<el-radio :label="2">已接通</el-radio>
							<el-radio :label="1">未接通</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否投诉" prop="complaint" required>
						<el-radio-group v-model="form.complaint">
							<el-radio :label="2">是</el-radio>
							<el-radio :label="1">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否到店" prop="is_arrived" required>
						<el-radio-group v-model="form.is_arrived">
							<el-radio :label="1">已到店</el-radio>
							<el-radio :label="2">未到店</el-radio>
							<el-radio :label="3">取消预约</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="回访标签" prop="type">
						<cl-select
							v-model="form.type"
							placeholder="请选择回访标签"
							style="width: 100%"
						>
							<el-option
								v-for="item in visitTypeList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item label="服务评价" prop="ser_level">
						<el-rate v-model="form.ser_level" />
					</el-form-item>
					<el-form-item label="老师评价" prop="tec_level">
						<el-rate v-model="form.tec_level" />
					</el-form-item>
					<el-form-item label="门店评价" prop="dept_level">
						<el-rate v-model="form.dept_level" />
					</el-form-item>
				</el-card>
			</el-form-item>

			<el-form-item label="回访内容" prop="content">
				<el-input
					v-model="form.content"
					placeholder="请填写回访内容"
					type="textarea"
					:rows="3"
					:maxlength="50"
				/>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import dayjs from "dayjs";

export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			pickerOptions: {
				disabledDate(time) {
					let now = dayjs();
					let date = dayjs(time);
					return date.isBefore(now.subtract(2, "day")) || date.isAfter(now);
				}
			},
			visitTypeList: [
				{ label: "回访", value: 0 },
				{ label: "客诉", value: 1 },
				{ label: "退定金", value: 2 },
				{ label: "未处理", value: 3 },
				{ label: "待沟通", value: 4 }
			],
			form: {
				order_info: "",
				is_true: 1,
				visit_time: dayjs().format("YYYY-MM-DD"),
				connect: 2,
				complaint: 1, //投诉
				is_arrived: 1,
				type: 0,
				ser_level: 5,
				tec_level: 5,
				dept_level: 5,
				content: "",
				// visit_status: '',
				cus_id: ""
			},
			rules: {
				ser_level: [{ required: true, message: "请选择服务评价", trigger: "change" }],
				tec_level: [{ required: true, message: "请选择技师评价", trigger: "change" }],
				dept_level: [{ required: true, message: "请选择门店评价", trigger: "change" }],
				visit_status: [{ required: true, message: "请选择回访状态", trigger: "change" }],
				visit_time: [{ required: true, message: "请选择回访时间", trigger: "change" }],
				complaint: [{ required: true, message: "是否投诉", trigger: "change" }],
				connect: [{ required: true, message: "是否接通", trigger: "change" }],
				content: [{ required: true, message: "请填写回访内容", trigger: "change" }],
				is_true: [{ required: true, message: "请选择是否属实", trigger: "change" }],
				is_arrived: [{ required: true, message: "请选择是否到店", trigger: "change" }],
				type: [{ required: true, message: "请选择回访", trigger: "change" }]
			},
			visitData: [],
			saving: false
		};
	},
	computed: {
		visitInfo() {
			return this.visitData[0] || {};
		}
	},
	methods: {
		open() {
			this.$refs.drawer.create();
			this.getVisitInfo();
		},
		reset() {
			this.$refs.form.resetFields();
		},
		close() {
			this.$refs.drawer.close();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cus_id, dept_id, biz_id } = this.detail;
				const { visitData } = this;
				let form = {
					...this.form,
					cus_id,
					dept_id,
					biz_id
				};
				if (visitData.length) {
					form.order_info = JSON.stringify(
						visitData.map(v => ({ ...v, projects: (v.projects || []).join(",") }))
					);
				}
				console.log(form);
				this.saving = true;
				await this.$service.customer.addVisit(form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.reset();
				this.close();
			});
		},
		async getVisitInfo() {
			const { cus_id } = this.detail;
			const data = await this.$service.customer.lastOrder({ cus_id });
			this.visitData = data;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-col {
		min-height: 78px;
	}
}
</style>
